<template>
  <div class="container">
    <div class="title">分类列表</div>
    <div class="input-section">
      <input type="text" class="input-field" v-model="str" placeholder="请输入分类名称" />
      <button class="add-btn" @click="add">添加</button>
    </div>
    <ul class="list-container">
      <li v-for="item in arr" :key="item._id" class="list-item">
        <span class="item-info">{{ item.createTime }}</span>
        <span class="item-info item-name">{{ item.name }}</span>
        <span class="item-info">{{ item.flag }}</span>
        <div class="action-buttons">
          <button class="delete-btn" @click="Sc(item._id)">删除</button>
          <button class="edit-btn" @click="Xg(item._id)">修改</button>
        </div>
      </li>
    </ul>
  </div>
  <div class="modal-overlay" v-show="flag" @click="flag = false">
    <div class="edit-section" @click.stop>
      <input type="text" v-model="mc" placeholder="请输入分类名称" />
      <button @click="Bc(id)">保存</button>
      <button @click="flag = false">取消</button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      arr: [],
      str: '',
      flag: false,
      mc: '',
      id: null,
    }
  },
  methods: {
    add() {
      axios
        .post('http://47.94.6.186:3001/admin/notice-category/create', {
          token: localStorage.getItem('loginToken'),
          name: this.str,
        })
        .then((res) => {
          console.log(res.data.data)
          this.arr.push(res.data.data)
          this.str = ''
        })
    },
    Sc(id) {
      axios
        .delete(`http://47.94.6.186:3001/admin/notice-category/delete/${id}`, {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
          id: id,
        })
        .then((res) => {
          console.log(res.data.data)
          this.arr = this.arr.filter((item) => item._id !== id)
        })
    },
    Xg(id) {
      this.flag = true
      this.id = id
      this.mc = this.arr.find((item) => item._id === id).name
    },
    Bc(id) {
      axios
        .put(
          `http://47.94.6.186:3001/admin/notice-category/update/${id}`,
          {
            name: this.mc,
          },
          {
            headers: {
              token: localStorage.getItem('loginToken'),
            },
          },
        )
        .then((res) => {
          console.log(res.data)
          alert('修改成功')
          this.flag = false
          // 更新本地列表中的数据
          const index = this.arr.findIndex((item) => item._id === id)
          if (index !== -1) {
            this.arr[index].name = this.mc
          }
        })
        .catch((error) => {
          console.error('修改失败:', error)
          alert('修改失败，请重试')
        })
    },
  },
  mounted() {
    axios
      .get('http://47.94.6.186:3001/admin/notice-category/list', {
        headers: {
          token: localStorage.getItem('loginToken'),
        },
      })
      .then((res) => {
        console.log(res.data.data.list)
        this.arr = res.data.data.list
      })
  },
}
</script>
<style scoped>
.container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.input-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  gap: 10px;
}

.input-field {
  width: 300px;
  height: 40px;
  padding: 0 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #409eff;
}

.add-btn {
  padding: 10px 20px;
  background: linear-gradient(45deg, #409eff, #66b1ff);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.list-container {
  list-style: none;
  padding: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
}

.list-item:hover {
  background-color: #f8f9ff;
}

.list-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
  margin-right: 15px;
  color: #666;
  font-size: 14px;
}

.item-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.delete-btn {
  padding: 8px 16px;
  background: linear-gradient(45deg, #f56c6c, #f78989);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(245, 108, 108, 0.3);
}

.edit-btn {
  padding: 8px 16px;
  background: linear-gradient(45deg, #67c23a, #85ce61);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.edit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(103, 194, 58, 0.3);
}

/* 弹框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-section {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edit-section input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.edit-section input:focus {
  border-color: #409eff;
}

.edit-section button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
  margin-right: 10px;
}

.edit-section button:first-of-type {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  color: white;
}

.edit-section button:first-of-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
}

.edit-section button:last-of-type {
  background-color: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.edit-section button:last-of-type:hover {
  background-color: #e9ecef;
}
</style>
